<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{msg}}</p>

<!--    innerHTML与innerText的区别-->
    <div>{{baiDuUrl}}</div>
    <div v-html="baiDuUrl"></div>

<!--    v-bind绑定标签属性，使其可以动态改变 -->
<!--    v-bind/:可简写为:-->
    <div v-bind:id="testId"></div>

<!--    {{}}内部不仅可以写简单的变量。还可以写单一表达式，如简单的运算，三元运算，但不能写语句，如赋值语句与流程控制语句-->

<!--    #####条件渲染#####-->
    <p v-if="flag">为真显示</p>
    <p v-else>为假显示</p>

    <p v-show="flag">show</p>
<!--    v-if是真正的条件渲染，在它切换的过程中，条件内的事件监听器何子组件适当的被销毁何重建。-->
<!--    其也是惰性的：如果在初始化的条件为假，则什么也不做，直到条件为真时，才会开始渲染条件快。-->
<!--    v-show就简单的多，不管初始条件是什么，元素总会被渲染，并且只是简单的基于css进行切换。css中的style="display: none"-->
<!--    v-if有更高的切换开销，v-show有更高的初始渲染开销。因此，若需要非常频繁的切换，则使用v-show较好，若很少改变，则v-if较好-->

<!--    #####列表渲染#####-->
    <!--<div v-for="(item,index) in list" :key="index">-->
<!--    若没有id可以使用index，但一般不会出现这种情况-->
<div v-for="item in list" :key="item.id">
  {{item.msg}}
</div>
<!--    v-for渲染元素列表时，默认使用“就地更新”的策略。-->
<!--    若数据项的顺序被改变，vue将不会移动dom元素来匹配数据项的顺序，而是就地更新每一个元素，并确保它们在每个索引的位置正确渲染-->
<!--    通过唯一key跟踪节点-->
  </div>

<!--  #####事件绑定#####-->
<!--v-on简写为@-->
  <button @click="fun1">点击计数：{{count}}</button>
  <button @click="fun2">点击之前</button>
  <button @click="fun3('hello')">say hello</button>

  <br>
<!--.lazy代表惰性同步,失去焦点或回车时触发-->
<!--  .trim代表自动去除前后空格-->
  <input type="text" v-model="message1"><input type="text" v-model.lazy.trim="message2"><br>
  <textarea>{{message1}},{{message2}}</textarea>

</template>
<script>
export default {
  data(){
    return{
      msg:"测试文本",
      baiDuUrl:"<a href='www.baidu.com'>百度</a>",
      testId:100,
      flag:true,
      list:[
        {
          id:1,
          msg:"消息1"
        },
        {
          id:2,
          msg:"消息2"
        },
        {
          id:3,
          msg:"消息3"
        }
      ],
      count:0,
      message1:"",
      message2:"",
    }
  },
  methods:{
    fun1(event){
this.count++
    },
    fun2(event){
      //这是原生的event
      console.log(event)
      event.target.innerHTML="点击之后"
    },
    // 传参
    fun3(data){
      alert(data)
    }
  }
}
</script>